<template>
    <div>
        <!-- 头部 -->
        <div class="header">
            <van-nav-bar title="文章" right-text="分享" left-arrow @click-left="back" @click-right="shareHandle" />
        </div>


        <div class="mui-content">
            <div id="backtop"></div>
            <div class="page-content">
                <!-- 标题 -->
                <div class="page-title">{{ topic.topicTitle }}</div>
                <!-- 内容 -->
                <img :src="path + 'zhonghui/topicCoverpic/' + topic.topicContent" alt="" class="conImg">
            </div>
            <!-- 最新评论区 -->
            <div class="comment">
                <div class="commit-new">最新评论</div>
                <div class="comment-item" v-for="(item, index) in comments" :key='index'>
                    <img :src="item.userImg ? path + 'zhonghui/user/' + item.userImg : '../../assets/geren/timg.png'"
                        class="user-head" @error="loadimg">
                    <div class="comment-name">{{ item.userName || '用户名' }}</div>
                    <div class="comment-date">{{ item.commentDate }}</div>
                    <div class="comment-text">{{ item.commentContent }}</div>

                </div>
                <!-- 暂无评论 -->
                <div class="tip" v-if="comments.length == 0">
                    <div class="tip-flex">
                        <img src="../../assets/tip_content.png" class="tip-img">
                        <span class="tip-text">还没有评论哟~</span>
                    </div>
                    <div class="subtitle">踊跃发表意见哟~</div>
                </div>
            </div>

            <div class="footer" v-show="!btnShow">
                <div class="mewant" @click="btnShow = true">我想说...</div>
                <!-- 点赞功能区 -->
                <div class="good-do" @click="toDianZan(0, 0)">
                    <img style="width: 18px;margin-bottom: 4px;" :src="!messageFlag ? good1 : good2">
                    <div class="good-do-num">{{ topic.dianzanshu }}</div>
                </div>
            </div>
            <!-- 发布 -->
            <div class="send-box new-send-box" v-show="btnShow">
                <div class="new-bak" @click="btnShow = false">
                    <van-icon name="share" />
                </div>
                <div class="send-content">
                    <input v-model="fourm_content" type="text" placeholder="说点什么吧..." />
                    <div class="send-btn" @click="send(0, 0, 'out')">发布</div>
                </div>
            </div>
        </div>





        <div class="isTask" v-if="isTask">
            <img src="../../assets/chicken/task.png" alt="">
            <div class="task-box">
                <div class="task-num">
                    <div class="task-num-tag" :style="{ height: doing1 + 'px' }"></div>
                    <div class="task-num-item">{{ taskNum }}s</div>
                </div>
            </div>
        </div>

    </div>

</template>

<script>

var timer = null, that = null;
import { alPath } from "../../network/request";
import { getTopicByPage, getAppTopicById, addTopicPrise, getReplayComment, addComment } from '../../network/luntan'
export default {
    name: 'HomeR',
    data() {
        return {
            path: alPath,
            isMusk: false,
            value: 2.5,
            doing1: 0,
            taskNum: 15,
            isTask: false,
            seeShow: false, //浏览医生说
            btnShow: false,
            good: false, //点赞状态
            dialogShow: false,
            user_id: localStorage.userId == undefined ? 0 : localStorage.userId,
            topic_id: localStorage.topic_id,
            topic: '',
            messageFlag: false,
            isShowLuntan: true,
            mask: true, //遮罩
            comments: [],
            listIndex: '',
            questFlag: false,
            fourm_content: '',
            form_contentN: '',
            currentComment: '',
            currentList: [],
            topComments: [],
            isComment: false,
            // cardShow: false,
            commentTask: false,
            classStatus1: false,
            classStatus2: false,
            isGetSuccess: false,
            fkFlag: 0,
            fkNum: 2,
            isGet: false,

            taskFlag: 0,//  1 小鸡活动  2 门店活动

            todayIsShare: false,//判断今日是否已经分享了
            todayInfo: '',//今日活动记录

            good1: require('../../assets/luntan/good-none.png'),
            good2: require('../../assets/luntan/good-great.png'),

        }
    },
    mounted() {

    },
    methods: {



        back() {
            this.$router.go(-1)
        },

        toNext: function (flag) {
            var that = this;
            if (flag == 'del') {
                if (localStorage.row_index == 1) {
                    that.$toast('没有上一篇了');

                    return
                } else {
                    that.classStatus2 = true;
                    setTimeout(function () {
                        that.classStatus2 = false
                    }, 200)
                }
                localStorage.row_index--;
            } else if (flag == 'add') {
                localStorage.row_index++;
                that.classStatus1 = true;
                setTimeout(function () {
                    that.classStatus1 = false
                }, 200)
            }
            console.log(localStorage.row_index);
            getTopicByPage({
                shop_id: localStorage.shopId,
                page: localStorage.row_index,
                size: 1
            }).then(res => {
                if (res.flag) {
                    if (localStorage.row_index >= res.data.total && flag == 'add') {
                        that.mask = false;
                        return that.$toast('没有下一页了!');
                    }
                    that.topic_id = data.data.list[0].topic_id;
                    that.mask = false;
                    document.querySelector('#backtop').scrollIntoView(true);
                    that.getDataTopic()
                }
            })

        },
        getDataTopic: function () {
            getAppTopicById({
                userId: localStorage.userId,
                topicId: this.topic_id,
            }).then(res => {
                if (res.flag) {
                    this.questFlag = true;
                    var data = res.data;
                    console.log(data)
                    if (data.topic.tagIds != null) {
                        var arr = localStorage.userTagList ? JSON.parse(localStorage.userTagList) : [],
                            a = data.topic.tagIds.split(',')
                        arr.push(...a)
                        localStorage.userTagList = JSON.stringify(Array.from(new Set(arr)))
                    }


                    this.messageFlag = data.topic.priseStatus == 1
                    this.topic = data.topic;

                    sharehrefTitle = this.topic.topicTitle




                    console.log(this.topic);
                    this.topic_id = this.topic.topicId;
                    this.topComments = [];
                    this.comments = data.topicComment;



                    share_img = alPath + "zhonghui/topic/" + data.topic.topicCover;

                    console.log(this.comments);
                }
            })

        },
        toDianZan: function (item, status, index) {

            addTopicPrise({
                topicId: this.topic_id,
                userId: this.user_id,
                // flag: this.messageFlag ? 0 : 1
            }).then(res => {
                if (res.flag) {
                    this.messageFlag = !this.messageFlag
                }
            })



        },
        toRepaly: function (item, index) {
            this.dialogShow = true;
            this.currentComment = {
                city_name: item.city_name,
                comment_content: item.comment_content,
                comment_id: item.comment_id,
                comment_num: item.comment_num,
                comment_status: item.comment_status,
                comment_zan: item.comment_zan,
                date_time: item.date_time,
                forum_id: item.forum_id,
                forum_title: item.forum_title,
                isRise: item.isRise,
                isShow: false,
                isTop: item.isTop,
                parent_id: item.parent_id,
                prise_num: item.prise_num,
                user_id: item.user_id,
                user_name: item.user_name,
            }
            this.listIndex = index;
            var _this = this;
            _this.mask = true;


            getReplayComment({
                forumId: item.forum_id,
                status: '3',
                parentId: item.comment_id,
            }).then(res => {
                if (res.flag) {
                    _this.currentList = res.data;
                }
            })

        },
        send: function (flag, from_user_id, status) {
            if (this.ifUserLogin()) {
                var time = this.getNowDate();
                var user_name = JSON.parse(localStorage.user).userName;
                var that = this;
                if (this.fourm_content.length == 0) {
                    that.$toast({
                        message: "怎么说也得两个字吧",
                        position: "bottom"
                    });
                } else {
                    that.mask = true;

                    that.formsend(time, user_name, flag, from_user_id);

                    if (status == 'out') {
                        that.btnShow = false;
                    }
                }
            }
        },
        formsend: function (time, user_name, flag, from_user_id) {
            addComment({
                commentContent: this.fourm_content,
                commentDate: time,
                topicId: this.topic_id,
                userId: this.user_id,
                userName: user_name,
                commentFlag: 0,
                parentId: 0,
                topping: 0,
                flag: 'add'
            }).then(res => {
                if (res.flag) {
                    this.$toast({
                        message: "评论成功",
                        position: "bottom"
                    });
                    if (flag == 0) {
                        this.getDataTopic()
                    } else {
                        this.getDataTopic()
                        this.toRepaly(this.currentComment);
                    }
                    //清空输入框
                    that.fourm_content = "";

                }
            })


        },

        getNowDate: function () {
            var date = new Date();
            var sign1 = "-";
            var sign2 = ":";
            var year = date.getFullYear() // 年
            var month = date.getMonth() + 1; // 月
            var day = date.getDate(); // 日
            var hour = date.getHours(); // 时
            var minutes = date.getMinutes(); // 分
            var seconds = date.getSeconds() //秒
            var weekArr = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天'];
            var week = weekArr[date.getDay()];
            // 给一位数数据前面加 “0”
            if (month >= 1 && month <= 9) {
                month = "0" + month;
            }
            if (day >= 0 && day <= 9) {
                day = "0" + day;
            }
            if (hour >= 0 && hour <= 9) {
                hour = "0" + hour;
            }
            if (minutes >= 0 && minutes <= 9) {
                minutes = "0" + minutes;
            }
            if (seconds >= 0 && seconds <= 9) {
                seconds = "0" + seconds;
            }
            var currentdate = year + sign1 + month + sign1 + day;
            return currentdate;
        },

        ifUserLogin: function () {
            if (this.user_id == 0) {
                this.$router.replace('/wxLogin')
                return false;
            } else {
                return true;
            }
        },
        getDays: function (day1) {
            var begintime = new Date(Date.parse(day1.replace(/-/g, "/"))).getTime();
            var endtime = new Date().getTime();
            var nTime = endtime - begintime;
            var day = Math.floor(nTime / 86400000);
            return day;
        },

        loadimg(e) {
            var img = e.srcElement;
            img.src = require('../../assets/geren/timg.png')
        },


        shareHandle() {
            shareHref()
        },
        taskSee: function () {
            var _this = this;
            _this.isTask = true;
            timer = setInterval(function () {
                if (_this.taskNum > 0) {
                    _this.taskNum--;
                } else {
                    if (_this.taskFlag == 2) {
                        _this.checkTodayActive(2)
                    } else {
                        _this.addTask(3);
                        _this.seeShow = true;
                    }
                    _this.isTask = false;
                    clearInterval(timer)
                }
                _this.doing1 = (_this.doing1 * 1) + 2.5;
            }, 1000)
        },

        checkTodayActive(flag) {
            console.log(flag);
            console.log(this.todayInfo);
            console.log(this.todayInfo.list.findIndex(x => x === (flag)));
            if (this.todayInfo.list.findIndex(x => x === (flag)) == -1) {
                this.todayInfo.list.push(flag)
                this.$toast(flag == 2 ? '已完成浏览文章任务' : '已完成分享文章任务')
                localStorage.shopActiveInfo = JSON.stringify(this.todayInfo)
                localStorage.removeItem("isPigTopicTask");
            } else {
                clearInterval(timer)
                this.isTask = false;
            }
        },
        getNowTime() {
            var myDate = new Date;
            var year = myDate.getFullYear();
            var mon = myDate.getMonth() + 1;
            mon = mon < 10 ? '0' + mon : mon
            var date = myDate.getDate();
            date = date < 10 ? '0' + date : date
            var date1 = myDate.getDate() + 1;
            date1 = date1 < 10 ? '0' + date1 : date1
            var hours = myDate.getHours();
            hours = hours < 10 ? '0' + hours : hours
            var minutes = myDate.getMinutes();
            minutes = minutes < 10 ? '0' + minutes : minutes
            var seconds = myDate.getSeconds();
            seconds = seconds < 10 ? '0' + seconds : seconds
            return year + "-" + mon + "-" + date

        },
        DateDiff(sDate1, sDate2) {
            var aDate, oDate1, oDate2, iDays;
            aDate = sDate1.split("-");
            oDate1 = new Date(aDate[1] + "," + aDate[2] + "," + aDate[0]);
            aDate = sDate2.split("-");
            oDate2 = new Date(aDate[1] + "," + aDate[2] + "," + aDate[0]);
            //把相差的毫秒数转换为天数 
            iDays = parseInt(Math.abs(oDate1 - oDate2) / 1000 / 60 / 60 / 24);
            return iDays;
        },
    },
    created() {
        console.log(localStorage.topic);
        console.log(111);
        this.getDataTopic();


        console.log(localStorage.isPigTopicTask)
        //  1 小鸡活动  2  门店活动
        if (localStorage.isPigTopicTask == 1 || localStorage.isPigTopicTask == 2) {
            this.taskFlag = localStorage.isPigTopicTask
            this.taskSee();
        }
        console.log(this.taskFlag);




        var time = this.getNowTime()
        console.log(time);
        var shareTime = localStorage.shareForumDay || '2024-06-25'
        this.todayIsShare = this.DateDiff(time, shareTime) == 0

        console.log(localStorage.shareForumDay);
        console.log(this.todayIsShare);


        // 有 且 是今日活动记录
        if (localStorage.shopActiveInfo) {
            var obj = JSON.parse(localStorage.shopActiveInfo)
            if (obj.time == this.getNowTime()) {
                this.todayInfo = JSON.parse(localStorage.shopActiveInfo)
                console.log(this.todayInfo);
            } else {
                this.todayInfo = {
                    time: this.getNowTime(),
                    list: []
                }
            }
        } else {
            this.todayInfo = {
                time: this.getNowTime(),
                list: []
            }
        }

        that = this
    },
    //计算属性
    computed: {

    },
    filters: {

    }

}
var shares = null;
var Intent = null,
    File = null,
    Uri = null,
    topic_id = localStorage.topic_id,

    share_img = '',
    sharehrefTitle = '',
    sharehrefDes = '大家都在中肽悦享讨论问题，你也来一起看看吧',
    sharehref = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx9cf9f21ba0cbf62b&redirect_uri=https://www.ccclkj.cn/sharePage/ZTYXApp/appInto.html',
    main = null;
// H5 plus事件处理
function plusReady() {
    updateSerivces();
    if (plus.os.name == "Android") {
        main = plus.android.runtimeMainActivity();
        Intent = plus.android.importClass("android.content.Intent");
        File = plus.android.importClass("java.io.File");
        Uri = plus.android.importClass("android.net.Uri");
    }
}
if (window.plus) {
    plusReady();
} else {
    document.addEventListener("plusready", plusReady, false);
}

/**
 * 
 * 更新分享服务
 */
function updateSerivces() {
    plus.share.getServices(function (s) {
        shares = {};
        for (var i in s) {
            var t = s[i];
            shares[t.id] = t;
        }
    }, function (e) {
        that.$toast("获取分享服务列表失败：" + e.message);
    });
}

function shareAction(sb, bh) {
    if (!sb || !sb.s) {
        that.$toast("无效的分享服务！");
        return;
    }

    var msg = {
        content: sharehrefDes,
        extra: {
            scene: sb.x,
            current_id: localStorage.userId,
        }
    };
    if (bh) {
        var state = topic_id + "@" + localStorage.shopId + "@" + localStorage.userId + "@1";
        // alert(state)
        msg.href = sharehref + "&response_type=code&scope=snsapi_userinfo&state=" + state + "#wechat_redirect";
        if (sharehrefTitle != "") {
            msg.title = sharehrefTitle;
        }
        if (sharehrefDes && sharehrefDes != "") {
            msg.content = sharehrefDes;
        }
        msg.thumbs = [share_img];
        msg.pictures = ["_www/logo.png"];
    } else {
        that.$toast("取消分享");
        if (pic && pic.realUrl) {
            msg.pictures = [pic.realUrl];
        }
    }
    // 发送分享
    if (sb.s.authenticated) {
        shareMessage(msg, sb.s);
    } else {
        that.$toast("未授权");
        sb.s.authorize(function () {
            shareMessage(msg, sb.s);
        }, function (e) {
            that.$toast("认证授权失败");

        });
    }
}
function shareMessage(msg, s) {
    s.send(msg, function () {
        that.$toast("分享到\"" + s.description + "\"成功！ ");

        if (!that.todayIsShare) {
            var date = new Date()
            var time = that.getNowTime()
            localStorage.shareForumDay = time
            that.todayIsShare = true
            that.checkTodayActive(3)
        }
    }, function (e) {
        that.$toast("分享到\"" + s.description + "\"失败: ");
    });
}
// 分析链接
function shareHref() {
    var shareBts = [];
    // 更新分享列表
    var ss = shares['weixin'];
    ss && ss.nativeClient && (shareBts.push({
        title: '微信朋友圈',
        s: ss,
        x: 'WXSceneTimeline'
    }),
        shareBts.push({
            title: '微信好友',
            s: ss,
            x: 'WXSceneSession'
        }));
    // 弹出分享列表
    shareBts.length > 0 ? plus.nativeUI.actionSheet({
        title: '分享',
        cancel: '取消',
        buttons: shareBts
    }, function (e) {
        if (e.index == 0) {
            that.$toast("您已取消了分享哟~");
        }
        (e.index > 0) && shareAction(shareBts[e.index - 1], true);

    }) : plus.nativeUI.alert('当前环境无法支持分享链接操作!');
}


</script>

<style lang='less' scoped>
.backBtn {
    margin-left: 30px;
    display: flex;
    align-items: center;
}

.backIcon {
    font-size: 39.9975px;
    width: 36px;
    height: 36px;
}

.searchBox {
    position: fixed;
    top: 0;
    margin: 0 auto;
    padding-top: 63.9975px;
    width: 100%;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    z-index: 99;
    box-shadow: 0 .9975px 6px #ccc;
}

.navTit {
    position: relative;
    left: 40px;
    font-size: 36px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #333333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.searchBox>div:last-child {
    margin-right: 30px;
    font-size: 28px;
}

.searchBox>div:last-child>img {
    width: 24px;
    height: 24px;
}


.page-content {
    box-sizing: border-box;
    width: 100%;
    background: #FFF;
    padding: 24px;
    margin-bottom: 24px;
}


.mui-bar-nav~.mui-content {
    padding-top: 0;
}

.page-title {
    width: 100%;
    font-size: 48px;
    color: #333;
    line-height: 1.5;
    font-weight: bold
}

.page-infor {
    display: flex;
    align-items: center;
    font-size: 24px;
    color: #999;
}

.page-text {
    font-size: 28px;
    color: #333;
    text-indent: 2em;
    line-height: 1.5;
    margin-bottom: 12px;
}

.user-name {
    margin-right: 16px;
}

.page-img {
    display: block;
    width: 100%;
    margin-bottom: 16px;
    border-radius: 16px;
}


.method {
    width: 100%;
}

.method {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
}










.method-btn-box {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}



.commit-new {
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #333;
    padding-top: 32px;
    margin-bottom: 8px;
}


.comment {
    box-sizing: border-box;
    width: 100%;
    padding: 0 24px;
    background: #FFFFFF;
}

.comment-item {
    box-sizing: border-box;
    position: relative;
    width: 100%;
    padding: 24px 0 24px 88px;
    min-height: 64px;
    border-bottom: 2px solid #F2F2F2;
}

.new-box-sroll {
    overflow: hidden scroll;
}

.comment-item:last-child {
    border-bottom: none;
}

.user-head {
    position: absolute;
    top: 24px;
    left: 0;
    display: block;
    width: 64px;
    height: 64px;
    border-radius: 50%;
}

.comment-name {
    font-size: 28px;
    line-height: 1.2;
    margin-bottom: 4px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #666666;
    display: flex;
    /* position: relative; */

}

.comment-name div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.comment-name span {
    background-color: #ff3b14;
    color: #fff;
    font-size: 24px;
    display: block;
    width: 40px;
    text-align: center;
    border-radius: 12px 12px 12px 0;
    height: 28px;
    margin-left: 8px;
    /* position: absolute; */
    /* left: 0; */
}

.comment-date {
    font-size: 24px;
    color: #999;
    line-height: 1.2;
}

.comment-text {
    width: 100%;
    font-size: 24px;
    color: #666;
    line-height: 1.5;
    padding-top: 12px;
    padding-right: 24px;
}

.send-box {
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 9;
    width: 100%;
    height: 88px;
    background: #FFF;
    border-top: 2px solid #F2F2F2;
    padding: 8px 24px;
}






.send-content {
    position: relative;
    // width: 100%;
    height: 64px;
    background: #F2F2F2;
    border-radius: 28px;
    padding: 0 120px 0 32px;
    overflow: hidden;
}

.send-content input {
    padding: 0;
    height: 100%;
    border: none;
    background: transparent;
    font-size: 28px;
    color: #333;
    margin-bottom: 0;
}

.send-btn {
    position: absolute;
    top: 0;
    right: 0;
    width: 112px;
    height: 64px;
    background: #FF8023;
    border-radius: 0 28px 28px 0;
    font-size: 28px;
    color: #fff;
    text-align: center;
    line-height: 64px;
}

.share-box {
    position: absolute;
    bottom: 0;
    right: 24px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 88px;
}

.share-box img {
    display: block;
    width: 32px;
    height: 32px;
    margin-right: 12px;
}

.share-text {
    font-size: 28px;
    color: #999;
}

.tip {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 316px;
}

.tip .tip-text {
    font-size: 36px;
    font-weight: bold;
    color: #969696;
    line-height: 1;
}

.tip .subtitle {
    font-size: 24px;
    margin-top: 16px;
    color: #c8c8c8;
    letter-spacing: 4px;
}

.tip .tip-img {
    display: block;
    width: 44px;
    height: 44px;
    margin-right: 16px;
}

.tip .tip-flex {
    display: flex;
    align-items: center;
}


.article-tag {
    width: 440px;
    font-size: 24px;
    color: #fff;
    background: #fd8a02;
    line-height: 1;
    padding: 8px;
    border-radius: 8px;
    opacity: 0.6;
    text-align: center;
}

.article-date {
    width: 100%;
    font-size: 28px;
    color: #333;
    text-align: right;
    margin-bottom: 16px;
    line-height: 1.2;
}

.mui-content {
    padding-bottom: 0;
    background: transparent;
    position: fixed;
    top: 114px;
    left: 0;
    bottom: 88px;
    overflow-y: scroll;
    width: 100%;
    height: auto;
}

.comment-tag {
    margin-top: 12px;
    position: relative;
    border-radius: 8px;
    font-size: 24px;
}

.comment-tag span {
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #2549D0;
    font-size: 24px;
    background-color: #ebebeb;
    padding: 8px 12px 8px 20px;
    border-radius: 20px;
    line-height: 24px;
}

.van-popup {
    overflow: hidden;
    overflow: scroll;
    padding-bottom: 88px;
}

.all-answer {
    position: relative;
    margin-top: 24px;
    font-size: 28px;
    padding-left: 24px;
}

.tag-num {
    margin-left: 16px;
    box-sizing: border-box;
    min-width: 32px;
    padding: 0 6px;
    color: #fff;
    font-weight: 500;
    font-size: 24px;
    line-height: 1.2;
    text-align: center;
    background-color: #ee0a24;
    border-radius: 32px;
}

.popup-title {
    position: fixed;
    width: 100%;
    border-radius: 40px 40px 0 0;
    font-size: 32px;
    text-align: center;
    z-index: 9;
    padding-top: 20px;
    margin-bottom: 8px;
    background-color: #fff;
}

.close {
    position: absolute;
    right: 24px;
    top: 24px;
}







.t30 {
    margin-top: 60px;
}

.l12px {
    left: 24px;
}

.pl54px {
    padding-left: 112px;
}

.van-popup {
    border-radius: 16px !important;
    overflow: hidden scroll !important;
}


.footer {
    position: fixed;
    height: 100px;
    z-index: 20;
    bottom: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    background-color: #fff;
    color: #A3A3A3;
    padding-right: 132px;
    display: flex;
    align-items: center;
    padding-left: 24px;
}

.footer input,
.mewant {
    height: 64px;
    border: none;
    background-color: #f0f0f0;
    margin-bottom: 0;
    border-radius: 32px;
    font-size: 32px !important;
    width: 100%;
    display: flex;
    align-items: center;
    padding-left: 24px;
}

.footer ::placeholder {
    color: #999 !important;
}

.good-do {
    right: 50px;
    padding-top: 4px;
}

.good-do img {
    width: 44px;
}

.good-do-num {
    font-size: 24px;
    line-height: 24px;
    color: #a3a3a3;
    position: relative;
}

.top-left,
.btm-right,
.good-do {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    line-height: 24px;
}

.top-left {
    right: 148px;
}

.btm-right {
    right: 32px;
}

.new-send-box {
    padding-left: 100px;
}

.new-bak {
    position: absolute;
    left: 24px;
    color: #666;
    font-size: 44px;
    transform: rotateY(180deg);
    top: 16px;
}

.new-btn-next {
    background-color: #fff !important;
    color: #a3a3a3;
    border: none;
    height: 40px;
    font-size: 40px;
}

.option {
    color: #E0E0E0 !important;
}

.seeShow {
    width: 584px;
    background-color: #fff;
    position: relative;
    border-radius: 16px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.seeShow img {
    width: 84px;
}

.van-overlay {
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.seeShow>div:nth-child(1) {
    font-size: 32px;
    font-weight: bold;
    padding-top: 40px;
    line-height: 34px;
    margin-bottom: 60px;
}

.seeShow>div:nth-child(3) {
    width: 324px;
    height: 72px;
    line-height: 72px;
    text-align: center;
    font-weight: bold;
    color: #fff;
    background-color: #FF8023;
    border-radius: 36px;
    margin-bottom: 40px;
    margin-top: 64px;
    font-size: 28px;
}

.seeShow>div:nth-child(2) {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 44px;
    font-weight: bold;
}

.close {
    position: absolute;
    right: 24px;
    top: 24px;
    font-size: 32px;
    color: #666;
}

.isTask {
    position: fixed;
    right: 0;
    bottom: 240px;
    z-index: 888;
    width: 234px;
}

.task-box {
    position: absolute;
    width: 266px;
    right: 0px;
    top: 0;
    text-align: center;
}

.isTask img {
    width: 100%;
}

.task-title {
    padding-top: 40px;
    font-weight: bold;
    font-size: 32px;
}


.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.warp {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.van-overlay {
    z-index: 30000;
}

.pupBc_2 {
    width: 748px;
    margin-top: 60px;
}

.pupBc {
    position: absolute;
    width: 560px;
    top: 50%;
    left: 50%;
    margin-left: -280px;
    margin-top: -244px;
}


.pup_2 {
    position: absolute;
    width: 596px;
    margin-top: 188px;
    margin-left: -292px;
    top: 50%;
    left: 50%;
}

.pup_2text {
    position: absolute;
    font-size: 32px;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 88px;
    margin-top: 468px;
    letter-spacing: 4px;
    margin-top: 188px;
    top: 50%;
}

.feed {
    position: absolute;
    width: 208px;
    top: 50%;
    left: 50%;
    margin-left: -104px;
    margin-top: -100px;
}

.feed_text {
    position: absolute;
    font-size: 28px;
    font-weight: bold;
    color: #B25D0A;
    letter-spacing: 4px;
    top: 50%;
    left: 50%;
    margin-left: -120px;
    margin-top: 128px;
    /* width: 174px; */
}

.pup_3 {
    position: absolute;
    width: 300px;
    margin-top: 296px;
    top: 50%;
    left: 50%;
    margin-left: -152px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pup_3text {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: 312px;
    margin-left: -68px;
    font-size: 40px;
    font-weight: bold;
    color: #FFFFFF;
    width: 136px;
}

.star {
    position: absolute;
    right: 0;
    top: 20px;
}

.star-doing {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 34px;
    position: absolute;
    height: 100%;
    width: 100%;
    transition-duration: 0.3s;
    bottom: 0;
}

.star-doing .fon14 {
    font-size: 28px;
    padding-bottom: 8px;
}

.red {
    color: #ff3b14;
}

.none-red {
    color: #ff3b14;
}

.isShowDoing {
    /* transition-duration: 0.3s;
	bottom: 60px;
	top: -30px; */
    animation: hDoing 0.6s infinite;
    z-index: 20;
}

@keyframes hDoing {
    0% {
        transform: translate(0px, 0px);
    }

    100% {
        transform: translate(0px, -24px);
    }
}





.task-num {
    z-index: 10;
    position: absolute;
    font-size: 28px;
    font-weight: bold;
    width: 92px;
    height: 92px;
    box-sizing: border-box;
    border: 8px solid #fff;
    border-radius: 50%;
    margin-top: 72px;
    left: 50%;
    margin-left: -4px;
    overflow-x: hidden;
    overflow-y: hidden;
}

.task-num-item {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    z-index: 12;
    justify-content: center;
    align-items: center;
    color: #F29D52;
    text-shadow: #fff 2px 0 0, #fff 0 2px 0, #fff -1px 0 0, #fff 0 -1px 0;
}

.task-num-tag {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    background-color: #fff;
    z-index: 8;
}


.conImg {
    margin-top: 28px;
    width: 100%;
}



.header .van-icon {
    color: #333;
    font-size: 40px;
    font-weight: bold;
}

.header .van-nav-bar__text {
    color: #333;
}

.header {
    position: fixed;
    z-index: 10;
    width: 100%;
    height: 88px;
    background-color: #fff;
    // padding-top: 60px;
}



/deep/.van-nav-bar__text,
/deep/.van-nav-bar__left,
/deep/.van-nav-bar .van-icon {
    color: #333;
}
</style>